<template>
	<view class="top-bar">
		<!-- 自定义顶部菜单栏组件 -->
		<view class="top-menu-container">
			<view class="top-menu-item" :class="{ 'selected-menu': current === index }"
				v-for="(item,index) in menuData" :key="index" @click="selectMenu(index)">
				<view class="menu-title">
					{{item.title}}
				</view>
				<view class="menu-icon" v-if="current === index && item.icon">
					<image :src="item.icon" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mitter from '@/common/mitt/eventBus.js';
	export default {
		props:{
			menuData: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				current: 0,
				// menuData: [{
				// 		title: '附近',
				// 		icon: 'https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com/app/static/image/icons/location1.png'
				// 	},
				// 	{
				// 		title: '露营',
				// 	},
				// 	{
				// 		title: '美食',
				// 	},
				// 	{
				// 		title: '民宿',
				// 	},
				// 	{
				// 		title: '活动',
				// 	}
				// ]
			};
		},
		methods: {
			selectMenu(index) {
				this.current = index;
				this.$emit('currentSelect',index)
				mitter.emit('closeDropDownMenu',true)
				mitter.emit('travelMode', uni.getStorageSync('travelMode'))
			}
		},
	};
</script>

<style lang="scss" scoped>
	.top-bar {
		width: 100%;
	}

	.top-menu-container {
		margin-left: 10px;
		display: flex;
		flex-wrap: nowrap;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch; // 在移动设备上优化滚动
		// 去掉 overflow: hidden
		scrollbar-width: none;
		-ms-overflow-style: none;

		&::-webkit-scrollbar {
			display: none;
		}

		.top-menu-item {
			flex: 0 0 80px;
			display: flex;
			border-radius: 17px;
			align-items: center;
			justify-content: center;
			width: 80px;
			height: 36px;
			background-color: #E7E7E7;
			margin-right: 16px;

			.menu-title {
				color: #9E9E9E;
				font-size: 14px;
			}

			.menu-icon {
				margin-left: -10px;
				image {
					width: 10px;
					height: 10px;
				}
			}
		}

		.selected-menu {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			background-color: #66596C;
			border-radius: 17px;
			width: 80px;
			height: 36px;
			
			.menu-title {
				color: #fff;
				font-size: 14px;
			}
		}
	}
</style>